<template>
  <div>
    <!-- 长篇连载的内容页 -->
    <headerTop :hot="title" :isActive="true"></headerTop>
    <div class="longPages">
      <div
        class="longList"
        v-for="item in data"
        :key="item.id"
        @click="goSerialcontent(item.id)"
      >
        <img :src="item.cover" alt="" />
        <div class="longList-content">
          <div>{{ item.title }}</div>
          <div>{{ getLength(item.subtitle) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLongTitle } from "@/api/articlesPage";
import headerTop from "@/components/headerTop";
export default {
  name: "longPage",
  components: {
    headerTop,
  },
  data() {
    return {
      data: [],
      title: "",
    };
  },
  created() {
    this.getTitle();
  },
  methods: {
    async getTitle() {
      const { data } = await getLongTitle(this.$route.params.id);
      this.data = data;
      this.title = data[data.length - 1].title;
      console.log("longpage", this.data);
    },
    goSerialcontent(id) {
      this.$router.push({
        path: "/serialcontent",
        query: {
          id: id,
        },
      });
    },
    // 处理字数长度的方法
    getLength(str) {
      if (str.length > 20) {
        return str.substr(0, 19) + "...";
      } else {
        return str;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.longPages {
  padding: 40px 15px 0px 15px;
  background: #fcfcfc;
  .longList {
    display: flex;
    margin: 20px 0;
    img {
      width: 60px;
      border-radius: 10px;
      margin-right: 15px;
    }
    .longList-content {
      padding: 5px 0;
      & > :nth-child(1) {
        font-size: 16px;
        color: #000;
      }
      & > :nth-child(2) {
        margin-top: 10px;
        font-size: 12px;
        color: #dedede;
      }
    }
  }
}
</style>